<!--
 * @Author: your name
 * @Date: 2021-07-13 22:14:03
 * @LastEditTime: 2021-07-20 12:02:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习库e:\72-briup\briupteamproj\src\views\components\Works.vue
-->
<template>
  <div class="works">
    <work
      v-for="(item, index) in works"
      :key="index"
      :work="item"
      :workName="workNames[index + 2]"
    ></work>
  </div>
</template>

<script>
import { get } from '../../utils/request'
import Work from './Works/Work.vue'
import Vue from 'vue'

export default {
  components: {
    Work,
  },
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      works: [],
      workNames: [],
    }
  },

  methods: {
    loadWorks() {
      let url = '/index/article/pageQuery'

      for (let i = 5; i < 11; i++) {
        this.params.categoryId = i
        get(url, this.params).then((res) => {
          // 设置数据为响应式数据
          this.$set(this.works, i - 5, res.data.list)
        })
      }
    },
    loadCategory() {
      let url = '/index/category/findAll'
      get(url).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          this.workNames.push(res.data[i].name)
        }
      })
    },
  },

  created() {
    this.loadWorks()
    this.loadCategory()
  },
  mounted() {
    console.log(this.works)
  },
}
</script>

<style scoped>
.works {
  width: 100%;
  height: 600px;
  /* background-color: lightgreen; */
}
</style>